<template>
	<div style="background-color: #ccc; height: 100vh; overflow: hidden;">
		<!-- 覆盖层展	示其他内容 -->
		<Cover :isShow="isShowCover" title="发布商品" @hiden='hiden'>
			<publish @response='pushData'  btnName="提交上架"></publish>
		</Cover>
		<div class="release redius">
			<span>
				0保证金发布商品,获取流量
			</span>
			<el-button @click='show' type="primary" round>立即发布</el-button>
		</div>
		<div class="redius">
			<Column :list='list'></Column>
		</div>
		<div class="redius">
			<div style="padding:10px;font-size: .8em;font-weight: bold;">
				常用应用
			</div>
			<Apps></Apps>
		</div>
		<img src="../../../../public/images/login.png" style="width: 100%;" alt="">
	</div>
</template>

<script lang="ts">
	import {
		defineComponent,
		inject,
		ref,
		reactive,
		provide
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	import {
		useStore
	} from 'vuex'
	import { ElLoading ,ElMessage} from 'element-plus'
	import Cover from '../../../components/common/cover/index.vue'
	import Column from '../../../components/common/column/inde.vue';
	import Apps from '../../../components/common/TabBar/index.vue'
	import publish from '../../../components/common/publish/index.vue'
	import {Append} from '@assets/request/setData'
	//发送商品请求
	function pushList(data={},token:string){
		return Append(data,token)
	}
	export default defineComponent({
		components: {
			Cover,
			Column,
			Apps,
			publish
		},
		setup() {
			let isShowCover = ref(false)
			let pageDate = inject('pageDate');
			const router = useRouter()
			const store = useStore();
			let getPageData = store.getters.getPageData;
			if(!getPageData) router.replace({
				path:'/'
			})
			let list = ref([{
					name: '待发货',
					value: getPageData.ToBeShipped.length
				},
				{
					name: '已发货订单',
					value: getPageData.Shipped.length
				},
				{
					name: '已销售订单数',
					value: getPageData.order.length
				},
				{
					name: '退款',
					value: getPageData.ToBeShipped.length
				}
			]);
			//apps
			provide('list', [{
					name: '商品管理',
					icon: '&#xeb67;',
					path: '/Home/CommodityManagement',
					noHover: true,
					color: '#0087ff'
				},
				{
					name: '订单管理',
					icon: '&#xe897;',
					path: '/default',
					noHover: true,
					color: '#ff0013'
				},
				{
					name: '数据中心',
					icon: '&#xe51f;',
					path: '/Home/analysis',
					noHover: true,
					color: '#009bff'
				},
				{
					name: '商品评价',
					icon: '&#xe621;',
					path: '/default',
					noHover: true,
					color: '#ffbc00'
				}
			])

			function skip(path: string) {
				router.push({
					path
				});
			}
			provide('skip', skip)

			function hiden() {
				isShowCover.value = false;
			}

			function show() {
				isShowCover.value = true;
			}
			//上传商品 
			async function pushData(data:any,clear:Function){
				const loading = ElLoading.service({
				    lock: true,
				    text: 'Loading',
				    background: 'rgba(0, 0, 0, 0.7)',
				})
				data.images=await  data.GetImgs;
				data.images=JSON.stringify(data.images);
				var result:any=await pushList(data,store.getters.getToken);
				if(result.data.state==200){
					  loading.close();
						 ElMessage({
						    showClose: true,
						    message: '上传成功！',
						    type: 'success',
						  })
							clear()
				}else{
					loading.close();
					ElMessage({
					   showClose: true,
					   message: '上传失败!',
					   type: 'error',
					 })
				}
			}
			return {
				isShowCover,
				hiden,
				show,
				pushData,
				list
			}
		}
	})
</script>

<style scoped="scoped">
	.redius {
		width: 98%;
		margin: .4em auto;
		border-radius: 10px;
		background-color: #fff;
	}

	.release {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 1em;
		line-height: 3.5em;
		padding-bottom: 1em;
	}
</style>
